<template>
    <div class="position-relative">
        <div class="position-relative flexCenterBetween border-light-theme pr-6" style="height: 24px;"
             @click="isCollapse = !isCollapse">
            <div class="py-2 px-6" style="color:#BCE2FC">{{selectItem.label}}</div>
            <a-icon type="down" :rotate="isCollapse?0:180"/>
        </div>
        <div class="position-absolute w-100 border-light-theme" style="top:30px;background-color:rgba(11, 35, 82, 0.9);z-index:100"
             v-show="!isCollapse">
            <div v-for="(item,i) in list" :key="i" @click="changeValue(item)" class="jselectOption"
                 :class="{'active':item.value == selectItem.value}">
                {{item.label}}
            </div>

        </div>

    </div>
</template>
<!--@jchange-->
<script>
    export default {
        name: "Jselect",
        props: {list: {default: () => []}, value: "", returnType: {default: () => 'value'}},
        watch: {
            list: {
                deep: false,  // 深度监听

                handler(newVal, oldVal) {
                    var item = this.list.find((v) => {
                        return v.value == this.value;
                    })
                    if (item) {
                        this.selectItem = item;
                    }
                }
            }
        },
        data() {
            return {
                isCollapse: true,
                selectItem: {},
            }
        },
        methods: {
            changeValue(item) {

                if (item.value != this.selectItem.value) {
                    this.selectItem = item;
                    if (this.returnType == "value") {
                        this.$emit('jchange', this.selectItem.value)

                    } else if (this.returnType == "all") {
                        this.$emit('jchange', this.selectItem)
                    }
                }
                this.$forceUpdate();
                setTimeout(() => {
                    this.isCollapse = true;
                }, 100)

            }
        }, mounted() {
            var item = this.list.find((v) => {
                return v.value == this.value;
            })
            if (item) {
                this.selectItem = item;
            }

        }
    }
</script>

<style scoped>
    .jselectOption {
        padding: 6px 14px;
        cursor: pointer;
    }

    .jselectOption:hover {
        background-color: rgba(82, 168, 208, 0.4)
    }

    .jselectOption.active {
        background-color: rgba(82, 168, 208, 0.8)
    }

</style>
